Getting Started on iOS — Legacy

For ChartIQ versions 7.0.5–7.5.0

TIn this tutorial you will learn how to integrate the ChartIQ mobile SDK into your native iOS app and instantiate and interact with a ChartIQ chart.

Contents:

Getting Started on iOS — Legacy

Overview

The ChartIQ mobile SDK provides a native interface for iOS developers to instantiate and interact with a ChartIQ chart. The interface will create a web view and populate it with a predefined HTML file that loads the ChartIQ JavaScript library, supporting CSS, and a JavaScript bridge file which interfaces with the native interface.

What occurs in the web view is hidden, automatic, and not dependent on developer configuration. You should be able to instantiate the object as you would any other native component and essentially feel like you are working with a native component.

Helper files and templates

The following files are included in the library package to help you get started:

mobile/js/nativeSdkBridge.js — Encapsulates simple functions to our library so any non-native JavaScript language can easily use it, without cluttering your code with string-based queries.
mobile/js/nativeSdkAccessibility.js — Provides an add-on for nativeSdkBridge.js that helps hook into the voice accessibility mode in both Android and iOS and allows for custom announcements of quotes.
mobile/sample-template-native-sdk.html — Provides a simple HTML application that can be put into a mobile web view to interface with our JavaScript bridge library, nativeSdkBridge.js. Includes a custom quote feed that can be used by a non-native JavaScript interface. Note: To use the template, copy it to the root directory of your library.

iOS quirks

iOS web views do not automatically follow relative paths. You'll need to ensure that your files can be found by iOS. For more information about relative paths in iOS apps, see the Add files and folders to a project tutorial (or search for "Add files and folders to a project" on the Apple xcode help site).

Important

Although the mobile SDK for iOS and the JavaScript library may use the same function call names at times, they are not the same, and they are not interchangeable.

When using the mobile SDK, follow the documentation in the mobile native API.
When directly calling the JavaScript API, follow the documentation in the JavaScript CIQ core library.

Requirements

See the ChartIQ iOS SDK Legacy README.

Download and import the ChartIQ mobile SDK

If you have a fresh checkout of the iOS legacy sample app, the latest ChartIQ pod is included and you can deploy right away. If not, follow the steps below to create the ChartIQ pod.
Create a Podfile in your project directory. If one already exists skip to the next step.
```
$ pod init
```

Add the ChartIQ dependency into your Podfile.

target 'YourAppTarget' do
	pod 'ChartIQ'
end

Install the new pod.
```
$ pod install
```

If successful, you should see an output like this:

$ pod install
Analyzing dependencies
Downloading dependencies
Using ChartIQ (x.x.x)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed

You've now successfully integrated the ChartIQ mobile SDK. Now, let's create a ChartIQ view in the app.

Create a ChartIQ view

Import the ChartIQ library into your app's ViewController.
```
import ChartIQ
```
Create a ChartIQ view in your app's ViewController. Open Main.storyboard and add a UIView to your ViewController. Adjust the dimensions of the UIView as desired.
Open the Editor Assistant so that your Storyboard and ViewController source file are both visible on the same screen.
Control-drag from your newly added view to your ViewController file.
Name this new association 'chartIQView' of type 'ChartIQView'.

Now, in your ViewController, add code to let the chart know how to load your data (see loadChartData).

This is an example on how to do that using the ChartIQ simulator data-server.

You should replace the code in the ViewController with your own implementation.

import UIKit
import ChartIQ

class ViewController: UIViewController {

    // MARK: - Properties

    @IBOutlet weak var chartIQView: ChartIQView!

    // MARK: - View Life Cycle

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        chartIQView.delegate = self
        chartIQView.dataSource = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: - Data

    // Sample code for loading data form your feed.
    func loadChartData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
        let urlString = "https://simulator.chartiq.com/datafeed?identifier=\(params.symbol)" +
            "&startdate=\(params.startDate)" +
            "\(params.endDate.isEmpty ? "" : "&enddate=\(params.endDate)")" +
            "&interval=\(params.interval)" +
        "&period=\(params.period)&seed=1001"
        guard let url = URL(string: urlString) else { return }
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard error == nil else { return }
            guard let data = data else { return }
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.sssZ"
            var chartData = [ChartIQData]();
            let json = try! JSONSerialization.jsonObject(with: data, options: [])
            guard let result = json as? [[String: Any]] else { return }
            result.forEach({ (item) in
                let close = item["Close"] as? Double ?? 0
                let dt = item["DT"] as? String ?? ""
                let date = dateFormatter.date(from: dt)!
                let high = item["High"] as? Double ?? 0
                let low = item["Low"] as? Double ?? 0
                let open = item["Open"] as? Double ?? 0
                let volume = item["Volume"] as? Int ?? 0
                let _data = ChartIQData(date: date, open: open, high: high, low: low, close: close, volume: Double(volume), adj_close: close)
                chartData.append(_data)
            })
            completionHandler(chartData)
        }
        task.resume()
    }
}

// MARK: - ChartIQDelegate

extension ViewController: ChartIQDelegate {

    func chartIQViewDidFinishLoading(_ chartIQView: ChartIQView) {
        chartIQView.setDataMethod(.pull)
        chartIQView.setSymbol("APPL")
    }

}

// MARK: - ChartIQDataSource

extension ViewController: ChartIQDataSource {

    public func pullInitialData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
        // put code for initial data load from your feed here
        loadChartData(by: params, completionHandler: completionHandler)
    }

    public func pullUpdateData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
	      // put code for initial data load from your feed here
        loadChartData(by: params, completionHandler: completionHandler)
    }

    public func pullPaginationData(by params: ChartIQQuoteFeedParams, completionHandler: @escaping ([ChartIQData]) -> Void) {
	      // put code for initial data load from your feed here
        loadChartData(by: params, completionHandler: completionHandler)
    }
}

Now we're ready to initialize the ChartIQ mobile SDK and connect it to the ChartIQ view.

Initialize the ChartIQ mobile SDK

Initialize the mobile SDK in your ChartIQViewController.
- Copy sample-template-native-sdk.html from the mobile directory into the root directory of the library package.
- Make sure the chartUrl string is set to the path where your ChartIQ HTML5 library is deployed so your web view can be initialized. For our application, the URL is set in the AppDelegate file.
- Note: If you are deploying your app using localhost, it is important to know that you have to use your local machine IP address for the URL path. Do not use "localhost" or "127.0.0.1", as the Xcode Emulator or real device won't recognize that path because the app is technically on it's own device.
```
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // !!!!! adjust `deploypath` as needed to match the path
    // to get to sample-template-native-sdk.html
    let chartUrl = "http://deploypath/template-native-sdk.html"
    ChartIQView.start(url: chartUrl)
    return true
}
```
Loading sample-template-native-sdk.html as a local resource

By default, this app is configured to load the sample HTML template and corresponding library files remotely via HTTP.

If instead you will load the library files as local resources, you'll need to ensure that your files can be found by iOS. Follow this tutorial or search for "Add files and folders to a project" in the Apple xcode help site.

Then modify your chartUrl to the following:
```
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
let url = Bundle.main.url(forResource: "chartiq/sample-template-native-sdk", withExtension: "html")
try! ChartIQView.start(url: (url?.absoluteString)!)
return true
}
```
If you are planning on bundling the library with your application, please let us know so we can send you a suitable package. The standard domain locked library will not work in this case. See Sidebar: Advantages of Remote Deployment in the WebViews and HTML5 Containers tutorial for details on these two approaches.
Build and run your app. You should see a ChartIQ view loaded and populated with a chart.

Next steps

See the following:

Getting Started on Android — Legacy tutorial
Mobile native API used in the mobile SDK
Native Library Bridge API used to interact with mobile applications
CIQ core JavaScript library accessed by the mobile library